<template>
  <div class="selfCheckScrapRecord zy-content">
    <!-- 模具与设备 -->
    <div class="search clear">
      <div class="search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.工序") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.productionProcesses"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.工单号") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.workCode"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.模具编号") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.moldCode"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.模具名称") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.moldName"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.自检人") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.operator"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.设备编号") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.deviceCode"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.工单状态") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.state"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.产品编号") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.materialCode"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.产品名称") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.materialName"/>
            </div>
          </Col>
          <Col span="4">
            <p class="label">{{ $t("selfCheckScrapRecord.产品型号") }}</p>
            <div class="ipt">
              <Input type="text" clearable v-model="searchParams.materialModel"/>
            </div>
          </Col>
          <Col span="8">
            <p class="label">{{ $t("selfCheckScrapRecord.实际时间") }}</p>
            <div class="ipt">
              <DatePicker @on-change="produceTimeChange" v-model="produceTime"
                          format="yyyy-MM-dd HH:mm:ss" type="datetimerange"/>
            </div>
          </Col>
          <Col span="8">
            <p class="label">{{ $t("selfCheckScrapRecord.自检时间") }}</p>
            <div class="ipt">
              <DatePicker @on-change="reportingTimeChange " v-model="reportingTime"
                          format="yyyy-MM-dd HH:mm:ss" type="datetimerange"/>
            </div>
          </Col>
          <div>
            <Col :span="4">
              <div>
                <p class="label hide-label">--</p>
                <div class="ipt">
                  <Button type="primary" class="search-btn" @click="changeNum()">{{ $t("selfCheckScrapRecord.查询") }}</Button>
                  <Button class="reset-btn" @click="reset()">{{ $t("selfCheckScrapRecord.重置") }}</Button>
                </div>
              </div>
            </Col>
          </div>
        </Row>
      </div>
    </div>
    <div class="alarmConfiguration">
      <div class="list-layout mt16">
        <div class="btns clear">
          <span class="title">{{ $t("selfCheckScrapRecord.列表") }}</span>
          <Button @click="exportTemplateClick" v-has="'selfCheckScrapRecordDaoChu'">{{ $t("selfCheckScrapRecord.导出") }}</Button>
        </div>
        <!-- 表格 -->
        <div class="tableContent">
          <Table class="resizable-table" border :columns="columns" ellipsis stripe :data="dataArr">
            <template slot-scope="{ row }" slot="action">
              <span class="operationBtn"
                    @click="chaKanClick(row)" v-has="'selfCheckScrapRecordChaKan'">
                <i class="iconfont zy-common-chakan"></i>{{ $t("selfCheckScrapRecord.查看") }}
              </span>
            </template>
          </Table>
        </div>
        <!-- 分页 -->
        <div class="pageWrap mt16">
          <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {searchApi, exportList} from "@/api/spareParts/selfCheckScrapRecord.js";
  import fileDownload from "js-file-download";

  export default {
    name: "selfCheckScrapRecord",
    data() {
      return {
        produceTime: '',
        reportingTime: '',
        searchParams: {},
        //一级table配置
        columns: [
          {
            title: "序号",
            key: "index",
            type: "index",
            width: 100,
            align: "center",
          },
          {
            title: "状态",
            key: "state",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "工单号",
            key: "workCode",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "设备编号",
            key: "deviceCode",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "模具编号",
            key: "moldCode",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "模具名称",
            key: "moldName",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "产品编号",
            key: "materialCode",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "产品名称",
            key: "materialName",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "产品型号",
            key: "materialModel",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "计划生产数量",
            key: "planProduceQuantity",
            width: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "生产数量",
            key: "produceQuantity",
            width: 100,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "报废总数量",
            key: "scrapQuantity",
            width: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "报废总重量（kg）",
            key: "scrapQuantitySum",
            width: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "计划开始时间",
            key: "workStartTime",
            width: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "计划完成时间",
            key: "workEndTime",
            width: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "实际开始时间",
            key: "produceStartTime",
            width: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "实际完成时间",
            key: "produceEndTime",
            width: 160,
            align: "center",
            resizable: true,
            tooltip: true,
          },
          {
            title: "操作",
            slot: "action",
            fixed: "right",
            width: 160,
            align: "center",
          },
        ],
        dataArr: [],
        pageNum: 1,
        pageSize: 10,
        total: 0,
        pageSizeOption: [10, 20, 30, 40],
      };
    },
    mounted() {
      this.changeNum();
    },
    methods: {
      produceTimeChange(time) {
        this.searchParams.actualProduceStartTime = time[0];
        this.searchParams.actualProduceEndTime = time[1];
      },
      reportingTimeChange(time) {
        this.searchParams.selfCheckStartTime = time[0];
        this.searchParams.selfCheckEndTime = time[1];
      },
      reset() {
        this.$set(this, "searchParams", {});
        this.produceTime='';
        this.reportingTime='';
        this.changeNum();
      },
      //分页
      changeNum() {
        this.pageNum = 1;
        this.searchList();
      },
      changePageSize(pageSize) {
        this.pageSize = pageSize;
        this.searchList();
      },
      changePageNum(val) {
        this.pageNum = val;
        this.searchList();
      },
      //查询列表
      searchList() {
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        };
        for (let key in this.searchParams) {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key]);
          }
        }
        searchApi(params).then((res) => {
          if (res.code === 200) {
            this.dataArr = res.data.records;
            this.total = res.data.total;
          } else {
            this.$Message.warning({
              content: res.msg,
              duration: 6,
              closable: true,
            });
          }
        });
      },
      //导出
      exportTemplateClick() {
        let params = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        };
        for (let key in this.searchParams) {
          if (this.searchParams[key]) {
            this.$set(params, key, this.searchParams[key]);
          }
        }
        const filName = '自检报废记录';
        exportList(params).then(res => {
          fileDownload(res, filName + '.xlsx')
        })
      },
      chaKanClick(row) {
        this.$router.push({
          path: "/productManage/selfCheckScrapRecordDetail",
          query: {
            workCode: row.workCode
          },
        });
      }
    },
  };
</script>